<template>
  <PageWrapper title="" contentFullHeight fixedHeight>
    <div class="bg-white p-20px h-full flex gap-2" style="border-radius: 8px">
      <div class="tab_box">
        <div style="margin: 0 auto">
          <span style="font-weight: bold">{{ emailType == 1 ? '我的邮箱' : '部门邮箱' }}</span>
        </div>
        <div
          v-for="(item, index) in tabs"
          :key="index"
          class="tab_item cursor-pointer hover:text-red-400 text-left pl-5 pr-5 flex items-center"
          :class="{ selected: activeKey === item.value }"
          @click="handleClickItem(item)"
        >
          <img :src="item.icon" :alt="item.label" class="mr-2" width="29" height="29" />
          {{ item.label }}
        </div>
      </div>
      <Scrollbar class="w-full">
        <transition-group class="h-full w-full" name="internalEmail">
          <Writebox
            v-if="activeKey == '1'"
            @handle-return="handleReturn"
            @handle-sand="handleSend"
            @handle-draft="handleDraft"
          />
          <Inbox v-if="activeKey == '2'" :curRecord="curRecord" />
          <Draftbox v-if="activeKey == '3'" />
          <OutBox v-if="activeKey == '4'" />
          <GarbageBinbox v-if="activeKey == '5'" />
        </transition-group>
      </Scrollbar>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { ref, onMounted, provide } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage } = useMessage();
  import { Scrollbar } from '/@/components/Scrollbar';
  import { tabs } from './internalEmail.data';
  import Writebox from './writebox/index.vue';
  import Inbox from './inbox/index.vue';
  import Draftbox from './draftbox/index.vue';
  import OutBox from './outBox/index.vue';
  import GarbageBinbox from './garbageBinbox/index.vue';
  import { useRouter } from 'vue-router';
  const { push, currentRoute } = useRouter();
  const activeKey = ref('2');
  //1是邮箱 2是部门
  const emailType = ref(1);
  const curRecord = ref({});

  const fetch = () => {
    // push(activeKey.value);
    if (currentRoute.value.query.receiver) {
      activeKey.value = '1';
    }
    if (currentRoute.value.query.emailType == 2) {
      emailType.value = 2;
    }
    if (currentRoute.value.query.op == 'show') {
      activeKey.value = '2';
      curRecord.value = JSON.parse(currentRoute.value.query.curRecord);
      console.log('fetch curRecord', curRecord.value);
    }
  };
  onMounted(fetch);

  const handleClickItem = (item: any) => {
    activeKey.value = '-1';
    curRecord.value = {};
    setTimeout(() => {
      activeKey.value = item.value;
    }, 50);
  };

  const handleReturn = () => {
    activeKey.value = '2';
  };

  //写信完回调发件箱
  const handleSend = () => {
    activeKey.value = '4';
  };
  //写信完回调草稿箱
  const handleDraft = () => {
    activeKey.value = '3';
  };

  //切换
  const handleChangeEmail = () => {
    if (emailType.value == 1) {
      emailType.value = 2;
    } else {
      emailType.value = 1;
    }
    activeKey.value = '10';
    setTimeout(() => {
      activeKey.value = '2';
    }, 300);
  };
  provide('internalEmail', {
    handleChangeEmail,
    emailType,
  });
</script>

<style lang="less" scoped>
  @import url(./common/internalEmail.less);
  .tab_box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 20px 5px;
    border-radius: 6px;
    .tab_item {
      width: 141px;
      line-height: 36px;
      &:hover {
        background-color: #f4e2cd;
      }
    }
  }
  .selected {
    background-color: #f4e2cd;
  }
</style>
